import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/constant.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/routes/app_pages.dart';
import 'package:mziot/app/tools/global_const.dart';
import 'package:mziot/app/tools/public_provider.dart';
import 'package:mziot/app/tools/tools.dart';
import 'package:mziot/generated/assets.dart';
import 'package:mziot/generated/locales.g.dart';

import '../controllers/auth_register_controller.dart';

class AuthRegisterView extends GetView<AuthRegisterController> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text(LocaleKeys.public_app_name.tr),
        backgroundColor: Colors.transparent,
        actions: [
          if (controller.thirdInfo != null) ...{
            TextButton(
              onPressed: () async {
                GlobalConst.sharedPreferences?.setString(Constant.kUser, controller.thirdInfo!);
                AppPages.INITIAL();
              },
              child: Text(LocaleKeys.bind_skip.tr),
            ),
          }
        ],
      ),
      body: Stack(
        children: [
          Image.asset(
            Assets.imagesListBack,
            width: double.infinity,
            height: double.infinity,
            fit: BoxFit.cover,
          ),
          SafeArea(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 24),
              child: Column(
                children: [
                  SizedBox(height: 32),
                  _logoView,
                  SizedBox(height: 20),
                  _titleView,
                  SizedBox(height: 10),
                  _textField(LocaleKeys.public_e_mail.tr, controller.emailController, false, false),
                  SizedBox(height: 5),
                  _textField(LocaleKeys.public_verification_code.tr, controller.codeController,
                      false, true),
                  if (controller.thirdInfo == null) ...{
                    SizedBox(height: 5),
                    _textField(LocaleKeys.register_password_tip.tr, controller.passController, true,
                        false),
                  },
                  SizedBox(height: 40),
                  _nextButton,
                  Spacer(),
                  if (controller.thirdInfo == null) ...{
                    _bottomView,
                  }
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  get _logoView {
    return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Container(
          width: 64,
          height: 64,
          color: Colors.white,
          child: Image.asset(Assets.imagesLogo),
        ),
      ),
    );
  }

  get _titleView {
    return Container(
      alignment: Alignment.center,
      child: Text(
        controller.thirdInfo != null ? LocaleKeys.bind_title.tr : LocaleKeys.register_title.tr,
        style: MFont.semi_Bold24.apply(color: Colors.white),
      ),
    );
  }

  Widget _textField(
      String hintText, TextEditingController editingController, bool secret, bool showCode) {
    var rightView;
    if (secret) {
      rightView = _eyesButton;
    } else if (showCode) {
      rightView = _sendButton;
    } else {
      rightView = SizedBox();
    }

    return Obx(() {
      var see = controller.isSee.value;
      if (!secret) {
        see = false;
      }
      return TextField(
        controller: editingController,
        obscureText: see,
        cursorColor: Colors.white,
        style: MFont.semi_Bold15.apply(color: Colors.white),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.only(bottom: 8),
          hintText: hintText,
          isDense: true,
          hintStyle: MFont.regular13.apply(color: Colors.white),
          labelStyle: MFont.semi_Bold15.apply(color: Colors.white),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white, width: 0.7),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white, width: 1),
          ),
          suffixIcon: rightView,
        ),
        textAlignVertical: TextAlignVertical.bottom,
        onChanged: (text) {
          if (editingController == controller.emailController) {
            controller.email.value = text;
          } else if (editingController == controller.codeController) {
            controller.code.value = text;
          } else {
            controller.password.value = text;
          }
        },
      );
    });
  }

  get _sendButton {
    return UnconstrainedBox(
      child: TextButton(
        style: ButtonStyle(
          textStyle: MaterialStateProperty.all(MFont.regular13),
          foregroundColor: MaterialStateProperty.all(MColor.xFF333333),
          minimumSize: MaterialStateProperty.all(Size(10, 20)),
          visualDensity: VisualDensity.compact,
        ),
        onPressed: () => controller.takeCode(),
        child: Container(
          padding: EdgeInsets.only(top: 15),
          child: Obx(() {
            final time = controller.time.value;
            return Text(
              time == 61 ? LocaleKeys.public_send.tr : '$time s',
              style: MFont.regular13.apply(color: Colors.white),
              textAlign: TextAlign.right,
            );
          }),
        ),
      ),
    );
  }

  get _eyesButton {
    return IconButton(
      padding: EdgeInsets.only(top: 20),
      onPressed: () {
        controller.isSee.value = !controller.isSee.value;
      },
      icon: Obx(() {
        return Image.asset(
          controller.isSee.value ? Assets.imagesEyeOpen : Assets.imagesEyeClose,
          width: 20,
          height: 20,
          color: Colors.white,
        );
      }),
    );
  }

  get _nextButton {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Colors.white,
      ),
      child: TextButton(
        style: ButtonStyle(shape: MaterialStateProperty.all(StadiumBorder())),
        onPressed: () {
          if (controller.thirdInfo != null) {
            controller.bindAction();
          } else {
            if (!controller.isCheck.value) {
              showToast(
                  '${LocaleKeys.login_agreement.tr}${LocaleKeys.login_privacy.tr} & ${LocaleKeys.login_user.tr}');
              return;
            }
            controller.registerAction();
          }
        },
        child: Icon(
          Icons.arrow_forward_rounded,
          size: 40,
          color: MColor.xFF48A23F_90,
        ),
      ),
    );
  }

  get _bottomView {
    return SafeArea(
      top: false,
      child: Container(
        margin: EdgeInsets.only(bottom: 24),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            IconButton(
              iconSize: 12,
              padding: EdgeInsets.only(left: 6, right: 6, top: 4, bottom: 8),
              constraints: BoxConstraints(maxWidth: 24, maxHeight: 24),
              onPressed: () {
                controller.isCheck.value = !controller.isCheck.value;
              },
              icon: Obx(() {
                return Image.asset(
                  controller.isCheck.value ? Assets.imagesGouxuanSel : Assets.imagesGouxuanNor,
                  width: 12,
                  height: 12,
                );
              }),
            ),
            Expanded(
              child: RichText(
                text: TextSpan(
                  text: LocaleKeys.login_agreement.tr,
                  style: MFont.regular13.apply(color: Colors.white),
                  children: [
                    TextSpan(
                      text: LocaleKeys.login_privacy.tr.fixAutoLines(),
                      style: MFont.semi_Bold15.apply(color: Colors.white),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Get.toNamed(
                            Routes.INSWEB,
                            parameters: {
                              'url': '${Server.web}protocol/privacy.html',
                              'title'
                                  '': LocaleKeys.login_privacy.tr
                            },
                          );
                        },
                    ),
                    TextSpan(
                      text: " & ",
                      style: MFont.regular13.apply(color: Colors.white),
                    ),
                    TextSpan(
                      text: LocaleKeys.login_user.tr,
                      style: MFont.semi_Bold15.apply(color: Colors.white),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Get.toNamed(
                            Routes.INSWEB,
                            parameters: {
                              'url': '${Server.web}protocol/agreement.html',
                              'title'
                                  '': LocaleKeys.login_user.tr
                            },
                          );
                        },
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
